<template>
	<view class="weather-card">
		<view class="card" @click="clickCard">
			<text class="t">{{ weather.temperature !== undefined ? weather.temperature : '-' }}℃</text>
			<text class="local">{{ address || '-' }}</text>
			<image class="img" :src="svgURL" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'WeatherCard',
		props: {
			address: String,
			weather: Object
		},
		methods: {
			clickCard() {
				// 跳转天气详情页
				uni.navigateTo({
					url: '/pages/environmentalmonitoring/index'
				})
			}
		},
		computed: {
			svgURL() {
				if (this.weather.code === 'CLEAR_DAY' || this.weather.code === 'CLEAR_NIGHT') {
					return require('@/static/images/weather/clear_days.svg');
				} else if (this.weather.code === 'PARTLY_CLOUDY_DAY' || this.weather.code === 'PARTLY_CLOUDY_NIGHT') {
					return require('@/static/images/weather/partly_cloudy_days.svg');
				} else if (this.weather.code === 'CLOUDY') {
					return require('@/static/images/weather/cloudy.svg');
				} else if (this.weather.code === 'LIGHT_HAZE') {
					return require('@/static/images/weather/light_haze.svg');
				} else if (this.weather.code === 'MODERATE_HAZE') {
					return require('@/static/images/weather/moderate_haze.svg');
				} else if (this.weather.code === 'HEAVY_HAZE') {
					return require('@/static/images/weather/heavy_haze.svg');
				} else if (this.weather.code === 'LIGHT_RAIN') {
					return require('@/static/images/weather/light_rain.svg');
				} else if (this.weather.code === 'MODERATE_RAIN') {
					return require('@/static/images/weather/moderate_rain.svg');
				} else if (this.weather.code === 'HEAVY_RAIN') {
					return require('@/static/images/weather/heavy_rain.svg');
				} else if (this.weather.code === 'STORM_RAIN') {
					return require('@/static/images/weather/storn_rain.svg');
				} else if (this.weather.code === 'FOG') {
					return require('@/static/images/weather/fog.svg');
				} else if (this.weather.code === 'SNOW') {
					return require('@/static/images/weather/snow.svg');
				}else if (this.weather.code === 'LIGHT_SNOW') {
					return require('@/static/images/weather/light_snow.svg');
				} else if (this.weather.code === 'MODERATE_SNOW') {
					return require('@/static/images/weather/moderate_snow.svg');
				} else if (this.weather.code === 'HEAVY_SNOW') {
					return require('@/static/images/weather/heavy_snow.svg');
				} else if (this.weather.code === 'STORM_SNOW') {
					return require('@/static/images/weather/storm_snow.svg');
				} else if (this.weather.code === 'DUST') {
					return require('@/static/images/weather/dust.svg');
				} else if (this.weather.code === 'SAND') {
					return require('@/static/images/weather/sand.svg');
				} else if (this.weather.code === 'WIND') {
					return require('@/static/images/weather/wind.svg');
				}
			}
		},
		created() {
		}
	}
</script>

<style lang="scss" scoped>
	.weather-card {
		width: 750rpx;
		height: 80px;
		padding: 0 50rpx 20px 50rpx;
		margin-bottom: 5px;
		background-color: #FFFFFF;
		box-sizing: border-box;
		.card {
			position: relative;
			display: flex;
			align-items: center;
			width: 650rpx;
			height: 60px;
			border-radius: 12rpx;
			padding-left: 50rpx;
			
			background: url(../../static/images/index/weatherbg.png) no-repeat;
			background-size: 100% 100%;
			color: #ffffff;
			
			overflow: hidden;
			box-sizing: border-box;
			.t {
				font-size: 24px;
			}
			.local {
				margin-left: 60rpx;
				
				font-size: 14px;
			}
			.img {
				position: absolute;
				right: 40rpx;
				width: 50px;
				height: 50px;
				opacity: 0.7;
			}
		}
	}
</style>
